<template>
	<div id="hot">
		<ul>
			<li v-for="item in data" class="clearfix"  @click="Location(item.id)">
				<div class="img_box fl">
				    <img :src="item.poster.origin" />					
				</div>
				<div class="film_desc fl">
					<div class="film_grade">
					    <span>{{item.grade}}</span>										
					</div>
					<div class="film_name">
						<span>{{item.name}}</span>						
					</div>
					<div class="film_intro">
						<span>{{item.intro}}</span>						
					</div>
					<div class="film_counts">
						<span>{{item.cinemaCount}}</span><span>家影院上映&nbsp;&nbsp;&nbsp;&nbsp;</span>
						<span>{{item.watchCount}}</span><span>人购票</span>					
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import axios from "axios";
	export default {
		created: function() {
			var now_this = this;
			axios.get("https://m.maizuo.com/v4/api/film/now-playing", {
				params: {
					count: 6,
					page: now_this.pages,
				}
			}).then(function(res) {
				//成功的回调
				now_this.data = res.data.data.films;
			}).catch(function(err) {
				//失败的回调
				console.warn(err)
			});
		},
		data: function() {
			return {
				data: "",
				pages: 1,
			}
		},
		methods: {
			Location: function(p) {
				//通过$router.push的方法，传路径
				//和location.href的用法一致，直接传地址就可以使用了
				this.$router.push({
					path: "/details",
					query: {
						id: p //传参
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "../scss/hot.scss";
</style>